<script setup>
import * as THREE from "three";
import { onMounted,ref } from "vue";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
defineProps({
  msg: {
    type: String,
    required: true,
  },
})
let isCuser=ref(true)
const myImg = ref(null);
const clock = new THREE.Clock();
// 3. 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer({ antialias: true });
onMounted(()=>{
  console.log(THREE);
})


let oneClick=()=>{
  isCuser.value=!isCuser.value
  if(!isCuser.value){
    console.log(myImg.value);
  // 1. 创建渲染器,指定渲染的分辨率和尺寸,然后添加到body中
  renderer.shadowMap.enabled = true;

renderer.pixelRatio = window.devicePixelRatio;
renderer.setSize(window.innerWidth, window.innerHeight);
myImg.value.append(renderer.domElement);


// 2. 创建场景
const scene = new THREE.Scene();


camera.position.set(5, 5, 10);
camera.lookAt(0, 0, 0);
// 4. 创建物体
const axis = new THREE.AxesHelper(5);
scene.add(axis);
// 添加立方体
const geometry = new THREE.BoxGeometry(4, 4, 4);
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
cube.rotation.y = Math.PI / 2;
function animate(c) {
  const elapsedTime = clock.getElapsedTime();
  cube.rotation.y =elapsedTime * Math.PI;
  renderer.render(scene, camera);
  // console.log(cube.rotation.y);
  requestAnimationFrame(animate);
  
}
scene.add(cube);
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

// 3.
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(110, 100, 100);
// 2. 该方向会投射阴影效果
directionalLight.castShadow = true;
scene.add(directionalLight);
cube.castShadow = true;
// 4. 平面
const planeGeometry = new THREE.PlaneGeometry(20, 20);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
planeMesh.rotation.x = -0.5 * Math.PI;
planeMesh.position.set(0, -3, 0);
planeMesh.receiveShadow = true;
scene.add(planeMesh);

// 5. 方向光的辅助线
const directionalLightHelper = new THREE.DirectionalLightHelper(
  directionalLight
);
scene.add(directionalLightHelper); // 辅助线


// 5. 渲染
renderer.render(scene, camera);
animate();
  }else{
    myImg.value.replaceChildren(); 
  }
 

}
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();

</script>

<template>
  <div>
    <el-button type="success" @click="oneClick">Success</el-button>
    <div class="greetings" ref="myImg">
      <!-- <h1 class="green">{{ msg }}</h1>
      <h3>
        You’ve successfully created a project with
        <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
        <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
      </h3> -->
    </div>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>
